<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="title" label="类别"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img :src="'http://127.0.0.1:8000/' + scope.row.img" width="100px" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="puts()">更新</el-button>
          <el-button @click="dels(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="dialogFormVisible=true">添加</el-button>

    <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="商品名称">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="upload-demo"
            ref="upload"
            :on-progress="das"
            :auto-upload="true"
            action="http://127.0.0.1:8000/user/file/"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <div slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addcate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "@/common/api";
export default {
  name: "ThisIsGoods",
  data() {
    return {
      tableData: "",
      dialogFormVisible: false,
      form: {
        title: "",
        price: 0,
        img:'',
        cid:this.$route.query.id
      },
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.getdata();
  },

  methods: {
    getdata() {
      axios
        .get("/user/goods/", { params: { id: this.$route.query.id } })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    dels(id) {
      axios
        .delete("user/goods/", { params: { id: id } })
        .then((res) => {
          console.log(res);
          this.getdata();
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    das(file){
      this.form.img = file
    },
    addcate(){
      axios.post('user/goods/', this.form).then(res => {
        console.log(res)
        if(res.data.code == 200){
          this.$message.success(res.data.msg)
          this.dialogFormVisible = false
          this.getdata()
        }else[
          this.$message.error(res.data.msg)
        ]
      }).catch(err => {
        console.log(err)
      })
    },
    
  },
};
</script>

<style scoped>
* {
  margin: 0;
}
</style>
